<style scoped>
	.date-item>>>.el-input__prefix,
	.date-item>>>.el-input__suffix {
		display: none !important;
	}

	.date-item>>>.el-input__inner {
		height: unset !important;
		padding: 0 2px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		color: #555 !important;
		border-bottom: unset;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 15px !important;
		width: 80px !important;
	}

	.commonBg {
		background: #fff;
		border: 1px solid#ddd;
		border-radius: 8px;
		width: 30px;
		height: 30px;
		font-size: 12px;
		text-align: center;
		line-height: 30px;
		position: relative;
	}

	.dot1 {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #4475f3;
	}

	.dot2 {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #fb8981;
	}

	.dotLabel {
		margin-right: 5px;
		color: #999;
		font-size: 13px;
	}

	.defenceSelectClass {
		color: #3a3ef4 !important;
		font-weight: bold;
	}
</style>
<template>
	<div style="height: 100%;">

		<div style="background: #fff;padding: 18px 29px 18px 34px;border-radius: 8px;">
			<div class="displayFlexBet"
				style="background: #fff;margin-bottom: 10px;border-bottom:1px solid#EDECF1;padding-bottom:10px">
				<div class="displayFlex">
					<div class="font16 mr20" style="font-weight: bold;">日常巡检</div>

					<div style="color: #555;" class="mr20 font15 displayFlex">
						<span class="mr10">{{params.outletName}}</span>
						<i class="el-icon-arrow-down"></i>
					</div>

					<div class="date-item displayFlex">
						<el-date-picker v-model="params.monthDateCheck" type="month" placeholder="选择月" size="mini"
							@change="getList(),getListByOutletId()" value-format="yyyy-MM" style="width: 80px;">
						</el-date-picker>
						<i class="el-icon-arrow-down"></i>
					</div>
				</div>
				<div class="displayFlex">
					<div class="displayFlex" style="margin-right: 15px;">
						<div
							style="background: #CCDDEF;width: 20px;height: 20px;border-radius: 4px;position: relative;margin-right: 4px;">
							<img src="@/assets/sIcon70.png"
								style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />
						</div>
						<span class="dotLabel">正常</span>
					</div>

					<div class="displayFlex" style="margin-right: 15px;">
						<div
							style="background: #F5DCA0;width: 20px;height: 20px;border-radius: 4px;position: relative;margin-right: 4px;">
							<img src="@/assets/sIcon75.png"
								style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />
						</div>
						<span class="dotLabel">异常</span>
					</div>

					<div class="displayFlex" style="margin-right: 15px;">
						<div
							style="background: #F2F2F2;width: 20px;height: 20px;border-radius: 4px;position: relative;margin-right: 4px;">
							<img src="@/assets/sIcon71.png"
								style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />
						</div>
						<span class="dotLabel">不生产</span>
					</div>

					<div class="displayFlex" style="margin-right: 15px;">
						<img src="@/assets/sIcon74.png" style="width: 20px;height: 20px;" />
						<span class="dotLabel">巡检</span>
					</div>

					<div class="displayFlex" style="margin-right: 15px;">
						<img src="@/assets/sIcon76.png" style="width: 20px;height: 20px;" />
						<span class="dotLabel">有副产</span>
					</div>

					<div class="displayFlex" style="margin-right: 15px;">
						<img src="@/assets/sIcon73.png" style="width: 20px;height: 20px;" />
						<span class="dotLabel">添加药剂</span>
					</div>

					<div class="displayFlex" style="margin-right: 15px;">
						<img src="@/assets/sIcon77.png" style="width: 20px;height: 20px;" />
						<span class="dotLabel">在线监测预警</span>
					</div>
				</div>
			</div>

			<div>
				<div style="flex-wrap: wrap;display: flex;">
					<div v-for="(item,index) in dayList" :key="index" @click="previewGasStandingBook(item)"
						style="width: calc(10% - 10px);margin: 5px;padding: 10px;border-radius: 8px;color: #555;position: relative;text-align: center;background: #fff;"
						:style="{'background':item.bg}">
						<div class="displayFlexBet mb10">
							<div style="font-size: 12px;margin-right: 10px;">{{item.dateStr.split("日")[0]}}</div>
							<div style="width: 24px;height: 24px;background: #fff;border-radius: 8px;padding: 2px 0;">
								<img v-if="item.workStatus == null" src="@/assets/sIcon72.png"
									style="width: 20px;height: 20px;" />
							</div>
							<div style="width: 24px;height: 24px;background: #fff;border-radius: 8px;padding: 2px 0;">
								<img v-if="item.isInspect" src="@/assets/sIcon74.png"
									style="width: 20px;height: 20px;" />
							</div>
						</div>

						<div class="displayFlexBet">
							<div style="width: 24px;height: 24px;padding: 2px 0;">
								<!-- <img v-if="item.wasteProduction == 'HW_WASTE_PRODUCE'" src="@/assets/sIcon76.png"
									style="width: 20px;height: 20px;" /> -->
							</div>
							<div style="width: 24px;height: 24px;background: #fff;border-radius: 8px;padding: 2px 0;">
								<img v-if="item.isMaterialChange" src="@/assets/sIcon73.png"
									style="width: 20px;height: 20px;" />
							</div>
							<div style="width: 24px;height: 24px;background: #fff;border-radius: 8px;padding: 2px 0;">
								<img v-if="item.warningExist" src="@/assets/sIcon77.png"
									style="width: 20px;height: 20px;" />
							</div>
						</div>

						<img v-if="item.workStatus =='NORMAL'" src="@/assets/sIcon70.png"
							style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />
						<img v-else-if="item.workStatus =='ABNORMAL' || item.warningExist" src="@/assets/sIcon75.png"
							style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />
						<!-- <img v-else-if="item.workStatus =='NOT_PRODUCE'" src="@/assets/sIcon71.png"
							style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" /> -->
						<img v-else-if="item.workStatus =='NOT_PRODUCE'" src="@/assets/sIcon71.png"
							style="width: 20px;height: 20px;position: absolute;top: 0;left: 0;" />

						<div class="displayFlex" style="justify-content: center;margin-top: 10px;"
							v-if="item.wasteProduction">
							<div v-if="item.wasteProduction == 'HW_WASTE_PRODUCE'" class="dot1" />
							<div v-if="item.materialRenewal == 'MATERIAL_RENEWAL'" class="dot2"
								style="margin-left: 3px;" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<div style="background: #fff;border: 1px solid #EDECF1;" class="mt10 bra8" v-if="defenceList && defenceList.length > 0">
			<div style="padding: 18px 34px;color: #888;cursor: pointer;border-bottom: 1px solid#EDECF1;" class="displayFlexBet">
				<div style="width:calc(100% - 380px);display:flex;white-space:nowrap;overflow-x: auto;">
					<div v-for="(item,index) in defenceList" :key="index" @click="getSimpleDefStdBookList(item)"
						:class="[item.defenceId == params.defenceId?'defenceSelectClass':'']"
						style="display: inline-block;margin-right: 28px;">
						<span>{{item.defenceName}}</span>
						<span v-if="index != defenceList.length -1" style="color: #EDECF1;" class="ml28">|</span>
					</div>
				</div>

				<div class="displayFlex">
					<div class="displayFlex font13">
						<div style="width: 9px;height: 9px;border-radius: 3px;background: #63CD92;"></div>
						<div style="color: #888;margin-left: 10px;">已巡检</div>
					</div>
					<div class="displayFlex ml30 font13">
						<div style="width: 24px;height: 24px;background: #FFF1D5;"></div>
						<div style="color: #888;margin-left: 10px;">异常</div>
					</div>
					<div class="displayFlex ml30 font13">
						<div style="width: 24px;height: 24px;background: #F2F5F9;"></div>
						<div style="color: #888;margin-left: 10px;">未巡检</div>
					</div>
					<div class="displayFlex ml30 font13">
						<div style="width: 24px;height: 24px;background: #CCE3FF;"></div>
						<div style="color: #888;margin-left: 10px;">未运行</div>
					</div>
				</div>
			</div>

			<div class="displayFlex" style="flex-wrap: wrap;">
				<div v-for="(item,index) in parameterAmountList" :key="index" :style="{'background':item.bg}"
					@click="$refs.xunjianHis.open(params.outletId,item.fullDateStr)" class="point"
					style="border-right: 1px solid#f6f6f6;width: 12.5%;padding: 20px 10px;border-bottom: 1px solid#f6f6f6;">
					<div style="display: flex;justify-content: space-between;">
						<div style="color: #888;margin-bottom: 10px;">{{Number(item.dateStr.split("日")[0])}}</div>
						<div style="color: #E19700;" v-if="item.runHour">{{item.runHour}}h</div>
					</div>

					<div style="height: 30px;">
						<div v-if="item.workStatus == 'NORMAL'"
							style="background: #63CD92;width: 10px;height: 10px;border-radius: 3px;"></div>
						<div v-else-if="item.workStatus == 'ABNORMAL'" style="color: #333;">
							{{item.problemContent}}
						</div>
						<div v-else-if="item.workStatus == 'NOT_PRODUCE'"
							style="background: #D9E3F0;padding: 4px 8px;border-radius: 40px;color: #333;width: 60px;text-align: center;font-size: 12px;">
							未巡检
						</div>
						<div v-else
							style="background: #D9E3F0;padding: 4px 8px;border-radius: 40px;color: #333;width: 60px;text-align: center;font-size: 12px;">
							未巡检
						</div>
					</div>
				</div>

				<div
					style="border-right: 1px solid#EDECF1;width: 12.5%;padding: 20px 10px;border-bottom: 1px solid#EDECF1;">
					<div style="display: flex;justify-content: space-between;" class="color-primary point"
						@click="gotoPage()">
						设备详情
					</div>
					<div style="height: 40px;"></div>
				</div>
			</div>
		</div>

		<div class="displayFlex"
			style="background: #fff;padding: 10px;border-radius: 8px;margin-top: 20px;justify-content: center;">
			<el-button type="primary" @click="showXunJianRecord">巡检记录</el-button>

			<el-button type="primary" @click="gotoDet" class="ml10">查看详细台账</el-button>

			<el-button type="primary" @click="getNotRecordStdBook" class="ml10">未做台账</el-button>

			<el-button type="primary" @click="getAbnormalStdBook" class="ml10">台账异常</el-button>

			<el-button type="primary" @click="makeOrder" class="ml10"
				style="background: #fff !important;color: #3A3EF4 !important;">+ 制作台账</el-button>
		</div>
		<xunjianHis ref="xunjianHis" v-if="params.outletId" :outletId="params.outletId"></xunjianHis>
		<previewGasStandingBook ref="previewGasStandingBook" v-if="params.outletId" :outletId="params.outletId"
			@success="getGasOutletBaseList" :outletName="outletName" />

		<el-dialog :title="params.outletName+dialogTitle" :visible.sync="dialogVisible" width="50%">
			<div>
				<div v-for="(item,index) in dataList1" :key="index">
					<div style="font-size:14px;color:#888" class="mb20">
						<span>{{item.year}}年</span>
						<span class="ml20">共{{item.totalNum}}天未作台账</span>
					</div>

					<div style="border: 1px solid#EDECF1;border-radius: 8px;margin-bottom: 20px;">
						<div v-for="(item2,index2) in item.list" :key="index2" class="pad20" @click="choose(item2)"
							:style="{'border-right':index2%6 == 5?'':'1px solid#EDECF1','border-bottom':index2> 5?'':'1px solid#EDECF1'}"
							style="display: inline-block;width: 16.6%;text-align:center">
							<div style="font-size:20px" class="mb5">{{item2.num}}天</div>
							<div style="font-size:13px;color:#999">
								<span>{{item2.month}}</span>
								<span>·</span>
								<span>{{item2.engMonth}}</span>
							</div>
						</div>
					</div>
				</div>
				<el-empty v-if="dialogTitle == '异常台账' && dataList1.length == 0" />
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import xunjianHis from '@/components/wasteGas/xunjianHis'
	import previewGasStandingBook from '@/components/wasteGas/previewGasStandingBook'
	import moment from 'moment'
	let that

	export default {
		components: {
			xunjianHis,
			previewGasStandingBook
		},
		props: {
			outletId: {
				type: String,
			},
			outletName: {
				type: String,
			},
		},
		data() {
			return {
				dialogVisible: false,
				dialogTitle: '未做台账',
				params: {
					outletId: '',
					outleName: '',
					monthDate: moment().format('YYYY-MM-DD'),
					monthDateCheck: moment().format('YYYY-MM'),
					defenceId: ''
				},

				dayList: [],
				outletList: [],
				defenceList: [],
				parameterAmountList: [],
				dataList1: [],
			}
		},
		mounted: function() {
			that = this
			//console.log(that.outletName)
			that.params.ticketId = that.$store.state.token
			that.params.outletId = that.outletId
			that.params.outletName = that.outletName
			that.getGasOutletBaseList()

		},
		methods: {

			gotoPage() {
				that.$router.push("/wasteGas/outletInspectDefDet?defenceId=" + that.params.defenceId)
			},

			choose(item) {
				that.params.monthDate = item.year + "-" + item.month.split("月")[0]
				that.params.monthDateCheck = item.year + "-" + item.month.split("月")[0] + "-" + item.num
				that.dialogVisible = false
				that.getGasOutletBaseList()
			},

			makeOrder() {
				this.$confirm('请前往手机端制作台账?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {}).catch(() => {});
			},

			//预览制作台账
			previewGasStandingBook(item) {
				that.$refs.previewGasStandingBook.open(that.params.outletId, item)
			},

			showXunJianRecord() {
				that.$refs.xunjianHis.open(that.params.outletId, that.params.monthDateCheck)
			},

			gotoDet() {
				that.$router.push("/wasteGas/orderDet?ticketId=" + that.params.ticketId + "&monthDate=" + that.params
					.monthDateCheck + "&outletId=" + that.params.outletId)
			},

			getGasOutletBaseList() {
				that.getList()
				that.getListByOutletId()
			},

			getAbnormalStdBook() {
				that.dialogTitle = "异常台账"
				that.ajax({
					url: '/gasOutlet/defDet/getAbnormalStdBook',
					data: JSON.stringify({
						outletId: that.params.outletId
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList1 = result.data
						that.dialogVisible = true
					},
				})
			},

			getNotRecordStdBook() {
				that.dialogTitle = "未做台账"
				that.ajax({
					url: '/gasOutlet/defDet/getNotRecordStdBook',
					data: JSON.stringify({
						outletId: that.params.outletId
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList1 = result.data
						that.dialogVisible = true
					},
				})
			},

			getListByOutletId() {
				that.ajax({
					url: '/gasOutletLine/getDefenceListByOutletId',
					data: {
						outletId: that.params.outletId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data && result.data.length > 0) {
							that.defenceList = result.data
							that.params.defenceId = result.data[0].defenceId
							//that.formLineData()
							that.getSimpleDefStdBookList()
						} else {
							that.defenceList = []
						}
					},
				})
			},


			getSimpleDefStdBookList(item) {
				if (item) that.params.defenceId = item.defenceId
				that.ajax({
					url: '/gasOutlet/defDet/getSimpleDefStdBookList',
					data: JSON.stringify({
						defenceId: that.params.defenceId,
						recordDate: that.params.monthDateCheck + '-01'
					}),
					contentType: 'application/json',
					success: function(result) {
						for (let item of result.data) {
							item.bg = '#fff'
							if (item.workStatus) {
								if (item.workStatus == 'ABNORMAL') item.bg = '#FFF1D5'
							} else {
								item.bg = '#F2F5F9'
							}
						}
						that.parameterAmountList = result.data
					},
				})
			},

			getList: function(value) {
				if (value) {
					let thisIndex = that.outletList.findIndex(item => item.outletId == value)
					if (thisIndex != -1) {
						that.params.outleName = that.outletList[thisIndex].gasOutletName
					}
				}
				var _this = this;
				var param = JSON.parse(JSON.stringify(_this.params));
				param.monthDate = param.monthDateCheck + "-01"
				that.ajax({
					url: '/gasOutlet/getGasOutletDateStandingBookList?ticketId=' + that.params.ticketId,
					dataType: 'json',
					data: JSON.stringify(param),
					contentType: 'application/json',
					success: function(result) {
						for (let item of result.data) {
							if (item.workStatus == 'NORMAL') {
								item.bg = '#CCDDEF'
							} else if (item.workStatus == 'ABNORMAL') {
								item.bg = '#F5DCA0'
							} else {
								//item.bg = '#fff'
								item.bg = "#F2F2F2 "
							}
						}
						that.dayList = result.data
					}
				})
			},

			//导出危废台账
			exportExcle() {
				let loading = this.$loading({
					lock: true,
					text: '加载中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				let temp = that.params.monthDateCheck;
				window.open('https://www.weifeibangbang.com/gasOutlet/createGasStandBookExcel?outletId=' +
					that.params.outletId + "&monthDate=" + temp + '&ticketId=' + that.params.ticketId)
				loading.close();
			},

		}
	}
</script>